<template>
  <div style="width: 1500px; height: 100vh">
    <div class="charts">
      <div id="lineGraph" style="height: 500px;"></div>
    </div>
    <div class="charts">
      <div id="line2Graph" style="height: 500px;"></div>
      <el-select>

      </el-select>
    </div>
    <el-row  class="row-bg" justify="space-between">
      <el-col :span="8">
        <div class="charts">
          <div id="pie3Graph" style="height: 500px;"></div>
        </div>
       </el-col>
      <el-col :span="8"> <div class="charts">
        <div id="pieGraph" style="height: 500px;"></div>
      </div></el-col>
      <el-col :span="8"><div class="charts">
        <div id="pie2Graph" style="height: 500px;"></div>
      </div></el-col>
    </el-row>
  </div>
</template>

<script>

import * as echarts from 'echarts';
import {findByMonthDay} from "@/http";
export default {
  name: 'App',
  data () {
    return {
      // 单月整体的客流波动分析
      findByMonthDay: {
        day: [],
        num: []
      }
    }
  },
  mounted(){
    // 单月整体的客流波动分析
    this.drawline()
    findByMonthDay().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        this.findByMonthDay.day.push(res.data[i].day)
        this.findByMonthDay.num.push(res.data[i].num)
        this.drawline()
        console.log(this.findByMonthDay.day)
        console.log(this.findByMonthDay.num)
      }
    })
    // 工作日和周末的客流分析
    this.drawPie();
    // 单站的点出/入站客流分析
    this.drawPie2();
    // 用户年龄结构分析
    this.drawPie3();
    // 早晚高峰客流站点分布分析
    this.drawline2()

  },
  methods: {
    // 单月整体的客流波动分析
    drawline() {
      let lineGraph = echarts.init(document.getElementById('lineGraph'), 'dark')
      lineGraph.setOption({
        title : {
          text: '7月整体的客流波动分析',
          subtext: '',
          x:'center'
        },
        xAxis: {
          type: 'category',
          data: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
          // data: this.findByMonthDay.day
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: this.findByMonthDay.num,
          // data: [1,2],
          type: 'line'
        }]
      })
    },
    // 工作日和周末的客流分析
    drawPie(){
      let pieGraph = echarts.init(document.getElementById('pieGraph'), 'dark');
      pieGraph.setOption({
        title : {
          text: '工作日和周末的客流分析',
          subtext: '',
          x:'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['工作日','周末']
        },
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
              {value:335, name:'工作日'},
              {value:310, name:'周末'},
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    // 单站的点出/入站客流分析
    drawPie2(){
      let pieGraph = echarts.init(document.getElementById('pie2Graph'), 'dark');
      pieGraph.setOption({
        title : {
          text: '单站的点出/入站客流分析',
          subtext: '',
          x:'center'
        },
        tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['出站','入站']
        },
        series : [
          {
            name: '访问来源',
            type: 'pie',
            radius : '55%',
            center: ['50%', '50%'],
            data:[
              {value:335, name:'出站'},
              {value:310, name:'入站'},
            ],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    },
    // 用户年龄结构分析
    drawPie3(){
      let pieGraph = echarts.init(document.getElementById('pie3Graph'), 'dark');
      pieGraph.setOption({
        title : {
          text: '用户年龄结构分析',
          subtext: '',
          x:'center'
        },
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: {show: true},
            dataView: {show: true, readOnly: false},
            restore: {show: true},
            saveAsImage: {show: true}
          }
        },
        series: [
          {
            name: '面积模式',
            type: 'pie',
            radius: [50, 250],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {value: 40, name: 'rose 1'},
              {value: 38, name: 'rose 2'},
              {value: 32, name: 'rose 3'},
              {value: 30, name: 'rose 4'},
              {value: 28, name: 'rose 5'},
              {value: 26, name: 'rose 6'},
              {value: 22, name: 'rose 7'},
              {value: 18, name: 'rose 8'}
            ]
          }
        ]
      })
    },
    // 早晚高峰客流站点分布分析
    drawline2() {
      let lineGraph = echarts.init(document.getElementById('line2Graph'), 'dark')
      lineGraph.setOption({
        title : {
          text: '早晚高峰客流站点分布分析 ',
          subtext: '',
          x:'center'
        },    xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }]
      })
    }


  }
}
</script>

<style>
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
  background: #100c2a;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
  @import "assets/base.css";
</style>
